<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
        }

        .continaer {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
        }

        .top {
            height: 100px;
            background-color: azure;
            width: 100%;
        }

        .main {
            display: flex;
            width: 100%;
            flex: 1;
        }

        .main .left {
            flex: 1;
            background-color: blanchedalmond;
            height: 100%;

        }

        .main .right {
            flex: 6;
            background-color: aliceblue;
            height: 100%;
        }

        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
            /* text-align: center; */
        }

        a {
            text-decoration: none;
        }

        .menu_item {
            padding-left: 20px;
        }

        .menu_item li {
            text-align: left;
        }

        .renderMain {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="continaer">
        <div class="top">
             <h1>xxx后台管理系统</h1>
            <a href="javascript:void(0)" id="quit" style="top:0px;position: absolute;right: 20px;">退出</a>

        </div>
        <div class="main">
            <div class="left">

                <ul>
                    <li class="menu_item">
                        <a href="javascript:void(0)">aaaa</a>
                        <ul>
                            <li data-url=${} class="menu_item"><a href="javascript:void(0)">aaaa</a></li>
                        </ul>
                    </li>
                </ul>

            </div>
            <div class="right">
                <div class="renderMain">

                </div>
            </div>
        </div>
    </div>

    <script>

        var oMenus = JSON.parse(sessionStorage.getItem("menus") || '[]');
        console.log(oMenus);
        function tree(oMenus, id = 0) {

            var oList = oMenus.filter(item => item.parentId == id);
            oList.forEach(item => {
                oMenus.forEach(function (item2) {
                    if (item.menuId == item2.parentId) {
                        item.children = tree(oMenus, item.menuId)
                    }
                })
            });

            return oList;

        }

        var oMenuList = tree(oMenus);

        var strHtml = `<ul>`;
        oMenuList.forEach(function (item) {
            console.log(item);
            strHtml += `
                <li class="menu_item" >
                    <a data-url=${item.url} href="javascript:void(0)"> ${item.name}</a>
                    ${fn(item.children)}
                   </li>
            `
        })
        strHtml += `</ul>`


        function fn(arr) {

            if (!Array.isArray(arr)) {
                return "";
            }
            var strHtml = '<ul>'
            arr.forEach(function (item) {
                strHtml += `<li class="menu_item">
                    <a  data-url=${item.url} href="javascript:void(0)"> ${item.name}</a>
                    </li>`
            })
            strHtml += `</ul >`
            return strHtml
        }


        $(".left").html(strHtml);

        $(".left").on("click", ".menu_item a", function () {
            var url = $(this).attr("data-url");
            console.log(url);
            $(".renderMain").load(url + ".html");
        })
    </script>

    <script>
        $(function () {
            $("#quit").on("click", function () {
                sessionStorage.clear();
                location="/login.html"
            })
        })
    </script>
</body>

</html>